<template>
    <div class="Tabar_Item" @click="SelectPath">
        <div v-show="!isSelect"><slot name="icon"></slot></div>
        <div v-show="isSelect"><slot name="select_icon"></slot></div>
        <div :style="titleColor"><slot name="tabar_title"></slot></div>
    </div>
</template>

<script>
export default {
    name:"TabarItem",
    props:{
        selectColor:{
            type:String,
            default:"red",
            required:false
        },
        pagePath:{
            type:String,
            required:true
        }
    },
    computed:{
        titleColor(){
            return this.isSelect ? "color:"+this.selectColor : {}
        },
        isSelect(){
            console.log(this.$route.path.length);
            return this.$route.path.indexOf(this.pagePath) !== -1
        }
    },
    data(){
        return{

        }
    },
    methods:{
        SelectPath(){
            //isSelect为真选中状态就不执行
            if(!this.isSelect){
                this.$router.replace(this.pagePath)
            }
            console.log('====================================');
            console.log(this.pagePath);
            console.log('====================================');
        }
    }
}
</script>

<style>
.Tabar_Item{
    flex: 1;
}
.Tabar_Item  img{
    width: 28px;
    height: 24px;
}
</style>
